<template>
  <transition name="translate-right">
    <div v-show="ttsaStore.controller" :class="$style['nav-or-menu']" class="z-200">
      <x-trans>
        <nav-list v-if="config.switchMode === 'nav'" />
      </x-trans>
      <button v-tap="handSwitch"
        :class="[$style.switch, config.switchMode === 'menu' ? 'mb-10px' : 'mt-10px', $style.dot]">
        <img :src="imgUrl" class="relative z-1 w-[30px] h-[30px]">
        <!-- <svg-icon class="relative z-1 text-[50px]" :name="`h5/nav-or-menu/${config.switchMode}`" /> -->
        <Finger v-show="showFinger" :class="$style['finger']" />
      </button>
      <x-trans>
        <menu-list v-if="config.switchMode === 'menu'" />
      </x-trans>
    </div>
  </transition>
</template>

<script
  lang="ts"
  setup
  name="NavOrMenu"
>
import { MODE } from '@/constants/ttsa';
import { useConfigStore } from '@/store/config'
import { useTtsaStore } from '@/store/ttsa'

const config = useConfigStore()
const ttsaStore = useTtsaStore()
const showDot = ref(0);
const showFinger = ref(true);

watch(() => ttsaStore.mode, (v) => {
  if (v === MODE.QA) config.switchMode = 'nav'
  else config.switchMode = 'menu'
})

const imgUrl = computed(() => {
  return new URL(`../../../../assets/white-theme/images/h5/nav-or-menu/${config.switchMode}.png`, import.meta.url).href
})

const handSwitch = () => {
  if (config.switchMode === 'nav' && showDot.value === 1) {
    showDot.value = 0;
  }
  config.switchMode = config.switchMode === 'nav' ? 'menu' : 'nav'
}

onMounted(() => {
  const timer = setTimeout(() => {
    handSwitch();
    clearTimeout(timer);
    showDot.value = 1;
    showFinger.value = false;
  }, 1900);
})

</script>

<style
  module
  lang="scss"
>
.nav-or-menu {
  position: absolute;
  top: 20px;
  right: 13.5px;
  width: 50px;

  .switch {
    @apply relative flc;
    width: 50px;
    height: 50px;

    &:before {
      content: '';
      @apply absolute top-0 left-0 bottom-0 right-0 z-0;
      background: linear-gradient(135deg, rgba(215, 228, 255, 0.4) 0%, rgba(215, 228, 255, 0.12) 100%);
      box-shadow: 0px 1px 9px rgba(9, 36, 64, 0.1);
      @include set-backdrop(10px);
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.3);
    }

    &.dot::after {
      position: absolute;
      top: 0;
      right: 0;
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #0063FF;
    }

    .finger {
      position: absolute;
      top: 35%;
      left: 35%;
      width: 45px;
      height: 45px;
      z-index: 1;
    }
  }
}
</style>
